<template>
	<view class="v-menu-slide" :class="[`v-menu-slide--${direction}`]">
		<!-- 菜单标题区域 -->
		<view :class="['menu-header', `menu-header--${direction}`]">
			<view
				v-for="(titleItem, index) in processedTitleItems"
				:key="index"
				:class="['menu-item', { 'menu-item--active': activeIndex === index }]"
				@click="selectMenuItem(index)"
			>
				<slot name="title" :item="titleItem" :index="index" :active="activeIndex === index" :direction="direction">
					<view class="menu-item__content" :class="[`menu-item__content--${direction}`]">
						<text class="menu-item__text">{{ titleItem.title }}</text>
					</view>
				</slot>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="menu-content">
			<swiper :current="activeIndex" :vertical="direction === 'y'" :duration="transitionDuration" @change="onSwiperChange" class="menu-content-swiper">
				<swiper-item v-for="(contentItem, index) in processedContentItems" :key="index">
					<view class="content-item">
						<slot name="content" :item="contentItem" :index="index">
							<text class="content-default-text">{{ contentItem.content || `内容 ${index + 1}` }}</text>
						</slot>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue';

const props = defineProps({
	// 菜单项数据（合并格式）
	items: {
		type: Array,
		default: () => []
	},
	// 菜单标题项数据（分开格式）
	titleItems: {
		type: Array,
		default: () => []
	},
	// 菜单内容项数据（分开格式）
	contentItems: {
		type: Array,
		default: () => []
	},
	// 排列方向：x（水平）或 y（垂直）
	direction: {
		type: String,
		default: 'x',
		validator: (value) => ['x', 'y'].includes(value)
	},
	// 默认激活的菜单项索引
	defaultActive: {
		type: Number,
		default: 0
	},
	// 过渡动画时长（毫秒）
	transitionDuration: {
		type: Number,
		default: 300
	},
	// 标题数据的关联键名
	titleKey: {
		type: String,
		default: null
	},
	// 内容数据的关联键名
	contentKey: {
		type: String,
		default: null
	},
	// 向后兼容的关联键名（如果设置了，会同时设置 titleKey 和 contentKey）
	relationKey: {
		type: String,
		default: null
	}
});

const emit = defineEmits(['update:active', 'change']);

// 当前激活的菜单项索引
const activeIndex = ref(props.defaultActive);

// 计算实际使用的键名
const effectiveTitleKey = computed(() => {
	if (props.titleKey) return props.titleKey;
	if (props.relationKey) return props.relationKey;
	return null; // 默认按索引匹配
});

const effectiveContentKey = computed(() => {
	if (props.contentKey) return props.contentKey;
	if (props.relationKey) return props.relationKey;
	return null; // 默认按索引匹配
});

// 检测数据格式
const isSeparateFormat = computed(() => {
	return props.titleItems.length > 0 && props.contentItems.length > 0;
});

// 处理标题项数据
const processedTitleItems = computed(() => {
	if (isSeparateFormat.value) {
		return props.titleItems;
	}
	return props.items;
});

// 处理内容项数据
const processedContentItems = computed(() => {
	if (isSeparateFormat.value) {
		// 分开格式：根据关联键匹配内容
		if (effectiveTitleKey.value && effectiveContentKey.value && props.titleItems.length > 0 && props.contentItems.length > 0) {
			return props.titleItems.map((titleItem) => {
				const titleValue = titleItem[effectiveTitleKey.value];
				const matchedContent = props.contentItems.find((contentItem) => contentItem[effectiveContentKey.value] === titleValue);
				return matchedContent || { content: '暂无内容' };
			});
		}

		// 分开格式：按索引匹配
		return props.contentItems.length > 0 ? props.contentItems : props.titleItems.map(() => ({}));
	}

	// 合并格式：直接使用 items
	return props.items;
});

// 选择菜单项
const selectMenuItem = (index) => {
	if (activeIndex.value === index) return;

	activeIndex.value = index;
	emit('update:active', index);
	emit('change', index);
};

// Swiper 切换回调
const onSwiperChange = (e) => {
	const index = e.detail.current;
	if (activeIndex.value === index) return;

	activeIndex.value = index;
	emit('update:active', index);
	emit('change', index);
};

// 监听外部 active 变化
watch(
	() => props.defaultActive,
	(newVal) => {
		if (activeIndex.value !== newVal) {
			activeIndex.value = newVal;
		}
	}
);

// 监听 items 变化
watch(
	() => [props.items, props.titleItems, props.contentItems],
	() => {
		// 数据变化时重置激活索引（可选）
		const maxIndex = isSeparateFormat.value ? Math.min(props.titleItems.length, props.contentItems.length) - 1 : props.items.length - 1;

		if (activeIndex.value > maxIndex) {
			activeIndex.value = Math.max(0, maxIndex);
		}
	},
	{ deep: true }
);

// 初始化
onMounted(() => {
	if (props.items.length === 0 && props.titleItems.length === 0) {
		console.warn('v-menu-slide: 请提供菜单数据（items 或 titleItems/contentItems）');
	}

	// 数据格式检查
	if (props.items.length > 0 && (props.titleItems.length > 0 || props.contentItems.length > 0)) {
		console.warn('v-menu-slide: 检测到同时提供了 items 和 titleItems/contentItems，将优先使用 titleItems/contentItems');
	}

	// 键名检查
	if (isSeparateFormat.value && effectiveTitleKey.value && effectiveContentKey.value) {
		// 检查标题数据中是否包含指定的键
		if (props.titleItems.length > 0 && !props.titleItems[0].hasOwnProperty(effectiveTitleKey.value)) {
			console.warn(`v-menu-slide: 标题数据中未找到键 "${effectiveTitleKey.value}"，将按索引匹配`);
		}

		// 检查内容数据中是否包含指定的键
		if (props.contentItems.length > 0 && !props.contentItems[0].hasOwnProperty(effectiveContentKey.value)) {
			console.warn(`v-menu-slide: 内容数据中未找到键 "${effectiveContentKey.value}"，将按索引匹配`);
		}
	}
});
</script>

<style lang="scss" scoped>
/* 样式保持不变，与之前相同 */
.v-menu-slide {
	width: 100%;
	height: 100%;
	display: flex;

	// 默认X轴方向
	flex-direction: column;

	// Y轴方向布局
	&--y {
		flex-direction: row;
	}
}

// 菜单标题区域
.menu-header {
	display: flex;
	background-color: #fff;
	z-index: 10;

	&--x {
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		// 隐藏滚动条（H5和App兼容）
		&::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
			color: transparent;
		}
	}

	&--y {
		flex-direction: column;
		width: 200rpx; // Y轴方向时固定宽度
		flex-shrink: 0; // 防止被压缩
		overflow-y: auto;
		// 隐藏滚动条（H5和App兼容）
		&::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
			color: transparent;
		}
	}
}

// 菜单项
.menu-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 30rpx;
	position: relative;
	transition: all 0.3s ease;
	flex-shrink: 0; // 防止在x方向排列时被压缩

	// Y轴方向时，菜单项内容横向排列
	.menu-header--y & {
		justify-content: flex-start;
	}

	&--active {
		color: #007aff; // 激活状态颜色

		&::after {
			content: '';
			position: absolute;
			background-color: #007aff;
			transition: all 0.3s ease;
		}
	}

	// X方向激活指示器
	.menu-header--x &--active::after {
		bottom: 0;
		left: 20%;
		right: 20%;
		height: 4rpx;
	}

	// Y方向激活指示器
	.menu-header--y &--active::after {
		top: 20%;
		bottom: 20%;
		left: 0;
		width: 4rpx;
	}
}

// 菜单项内容容器
.menu-item__content {
	display: flex;
	align-items: center;

	// Y轴方向时，内容横向排列
	&--y {
		flex-direction: row;
	}
}

.menu-item__text {
	font-size: 28rpx;
	font-weight: 500;
}

// 内容区域
.menu-content {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.menu-content-swiper {
	width: 100%;
	height: 100%;
}

.content-item {
	width: 100%;
	height: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	/* #ifdef H5 */
	overflow: auto;
	/* #endif */
	// 隐藏滚动条（H5和App兼容）
	&::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
}

.content-default-text {
	font-size: 28rpx;
	color: #666;
}

/* App和H5兼容性处理 */
/* #ifdef APP-PLUS */
.menu-header--x {
	-webkit-overflow-scrolling: touch;
}
/* #endif */

/* #ifdef H5 */
// H5特定样式
@media (hover: hover) {
	.menu-item:hover {
		background-color: #f5f5f5;
	}
}
/* #endif */
</style>
